<template>
  <div>
    <a-card :bordered="false">
      <a-row :gutter="20">
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20">
          <a-input placeholder="请输入 用户名" v-model="input" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20">
          <a-input placeholder="请输入 用户名" v-model="input" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20">
          <a-input placeholder="请输入 用户名" v-model="input" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20" v-show="fromSearch.state">
          <a-input placeholder="请输入 用户名" v-model="input" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20" v-show="fromSearch.state">
          <a-input placeholder="请输入 用户名" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20" v-show="fromSearch.state">
          <a-input placeholder="请输入 用户名" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20" v-show="fromSearch.state">
          <a-input placeholder="请输入 用户名" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20" v-show="fromSearch.state">
          <a-input placeholder="请输入 用户名" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" class="pb-20" style="float:right">
          <a-button type="primary" class="mr-10">查询</a-button>
          <a-button class="mr-10">重置</a-button>
          <a-button type="link" @click="fromSearch.state=!fromSearch.state">
            <div v-show="!fromSearch.state">
              <a-icon type="down" />展开
            </div>
            <div v-show="fromSearch.state">
              <a-icon type="up" />收起
            </div>
          </a-button>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="pb-20">
          <a-button type="primary" class="mr-10" @click="visible=true">新建</a-button>
          <a-popconfirm title="您确定要删除?" @confirm="confirm" okText="确定" cancelText="取消">
            <a-button type="danger" class="mr-10">批量删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-table :columns="columns" :dataSource="data" :scroll="{ x: 3500 }" :pagination="{pageSize:15}">
        <template slot="action">
          <!-- slot-scope="text, record, index" -->
          <a href="javascript:;" @click="visible=true">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="您确定要删除?" @confirm="confirm" okText="确定" cancelText="取消">
            <a href="javascript:;" class="text-danger">删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <!-- <a-table :columns="columns" :dataSource="data" size="middle" :pagination="false">
        <template slot="name" slot-scope="text">
          <a href="javascript:;">{{text}}</a>
        </template>
        <template slot="operation">
          <a href="javascript:;" @click="visible=true">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="您确定要删除?" @confirm="confirm" okText="确定" cancelText="取消">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </template>
      </a-table>-->
      <!-- <div class="text-center mt-20">
        <a-pagination v-model="current" :total="50" showSizeChanger showQuickJumper />
      </div>-->
    </a-card>

    <!-- 表单 -->
    <a-modal
      title="Title"
      class="xs-w100"
      :width="1000"
      :visible="visible"
      @ok="handleCancel"
      @cancel="handleCancel"
    >
      <a-form :form="form" layout="vertical" hideRequiredMark>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="Name">
              <a-input
                v-decorator="['name', {
                  rules: [{ required: true, message: 'Please enter user name' }]
                }]"
                placeholder="Please enter user name"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="Url">
              <a-input
                v-decorator="['url', {
                  rules: [{ required: true, message: 'please enter url' }]
                }]"
                style="width: 100%"
                addonBefore="http://"
                addonAfter=".com"
                placeholder="please enter url"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="Owner">
              <a-select
                v-decorator="['owner', {
                  rules: [{ required: true, message: 'Please select an owner' }]
                }]"
                placeholder="Please a-s an owner"
              >
                <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
                <a-select-option value="mao">Maomao Zhou</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="Type">
              <a-select
                v-decorator="['type', {
                  rules: [{ required: true, message: 'Please choose the type' }]
                }]"
                placeholder="Please choose the type"
              >
                <a-select-option value="private">Private</a-select-option>
                <a-select-option value="public">Public</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="Approver">
              <a-select
                v-decorator="['approver', {
                  rules: [{ required: true, message: 'Please choose the approver' }]
                }]"
                placeholder="Please choose the approver"
              >
                <a-select-option value="jack">Jack Ma</a-select-option>
                <a-select-option value="tom">Tom Liu</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="DateTime">
              <a-date-picker
                v-decorator="['dateTime', {
                  rules: [{ required: true, message: 'Please choose the dateTime' }]
                }]"
                style="width: 100%"
                :getPopupContainer="trigger => trigger.parentNode"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="Description">
              <a-textarea
                v-decorator="['description', {
                  rules: [{ required: true, message: 'Please enter url description' }]
                }]"
                :rows="4"
                placeholder="please enter url description"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import axios from "axios";

const columns = [
  {
    title: "Full Name",
    width: 200,
    dataIndex: "name",
    key: "name",
    fixed: "left"
  },
  { title: "Age", dataIndex: "age", key: "0", width: 100 },
  { title: "Column 1", dataIndex: "address", key: "1", width: 300 },
  { title: "Column 2", dataIndex: "address", key: "2", width: 300 },
  { title: "Column 3", dataIndex: "address", key: "3", width: 300 },
  { title: "Column 4", dataIndex: "address", key: "4", width: 300 },
  { title: "Column 5", dataIndex: "address", key: "5", width: 300 },
  { title: "Column 6", dataIndex: "address", key: "6", width: 300 },
  { title: "Column 7", dataIndex: "address", key: "7", width: 300 },
  { title: "Column 8", dataIndex: "address", key: "8", width: 300 },
  { title: "Column 9", dataIndex: "address", key: "9", width: 300 },
  { title: "Column 10", dataIndex: "address", key: "10", width: 300 },
  {
    title: "Action",
    key: "operation",
    fixed: "right",
    width: 200,
    scopedSlots: { customRender: "action" }
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  });
}

export default {
  name: "User",
  data() {
    return {
      data,
      columns,
      current: 1,
      fromSearch: {
        state: false
      },
      input: null,
      form: this.$form.createForm(this),
      visible: false,
      selectedRowKeys: []
    };
  },
  mounted() {},
  methods: {
    confirm() {
      global.tools.confirm("确定要删除?", () => {
        global.tools.msg("删除成功!");
        global.tools.alert("删除成功!", () => {
          global.tools.notice("好的我知道你知道了");
        });
      });
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleCancel(e) {
      this.visible = false;
    }
  }
};
</script>

